<html>
<head>
    <title>Leaflets map | ElectionLeaflets.org</title>
   <link rel="stylesheet" media="all" type="text/css" href="http://www.electionleaflets.org/css/main.css?v=6" /> 
    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript yourself) -->
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 
    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    
<script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity)
        var lat=53;
        var lon=-1;
        var zoom=5;

        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
            defaultHandlerOptions: {
                'single': true,
                'double': false,
                'pixelTolerance': 0,
                'stopSingle': false,
                'stopDouble': false
            },
            initialize: function(options) {
               this.handlerOptions = OpenLayers.Util.extend(
                    {}, this.defaultHandlerOptions
                );
               OpenLayers.Control.prototype.initialize.apply(
                   this, arguments
                ); 
                this.handler = new OpenLayers.Handler.Click(
                    this, {
                       'click': this.trigger
                    }, this.handlerOptions
                );
            }, 

            trigger: function(e) {
                var lonlat = map.getLonLatFromViewPortPx(e.xy).transform(new OpenLayers.Projection("EPSG:900913"));
                function handler(request) {
                    if (request.status == 200) {
                        var myContent = document.getElementById("content");
                        myContent.innerHTML = request.responseText;
                        }
                }

                var request = OpenLayers.Request.GET({
                    url: '{% url boundaries.views.popup mapname%}/' + lonlat.lon + '/' + lonlat.lat + '/' + map.zoom,
                    callback: handler
                });
            }

            });

 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:900913")
            } );

		
            // Define the map layer
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
            layer = new OpenLayers.Layer.OSM( "Open Street Map");
            map.addLayer(layer);

            //Custom layer
            custom = new OpenLayers.Layer.TMS("Constituencies",
                       "{% url boundaries.views.tile mapname%}",
                       { 'type':'png', 'getURL':get_my_url, transparent: 'true', isBaseLayer: false});
            map.addLayer(custom);

            var click = new OpenLayers.Control.Click();
            map.addControl(click);
            click.activate();

 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }

        function get_my_url (bounds) {
            var res = this.map.getResolution();
            var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
            var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
            var z = this.map.getZoom();
    
            var path = z + "/" + x + "/" + y + "." + this.type;
            var url = this.url;
            if (url instanceof Array) {
                url = this.selectUrl(path, url);
            }
            return url + path;

        }
    </script>
      <STYLE type="text/css">
   H1              { font-size: 125%; }
   div#sidebar { float:right; width:28.5%; height:100%; margin-left:1em;font-size: 90%; text-align:left;}
   div#map      {width:70%; height:100%;}
   td {width:2em;text-align:center padding:0!important;}
  </STYLE>


</head>
 
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
             <div id="divBanner" class="mega">                        
                Your wannabe MPs in their own words:
                <strong><a href="http://election.theyworkforyou.com/">They Work For You - candidate quiz</a></strong>
                </div>         
 <div id="divHeader">

                            <p id="pLogo"><a href="http://www.electionleaflets.org"><span class="hide">ElectionLeaflets.org - Real time election leaflet monitoring</span></a></p>
                    
            <ul id="ulMenu">
              <li>
                  <a href="http://www.electionleaflets.org">
                      Home
                  </a>
              </li>
              <li>
                  <a href="http://www.electionleaflets.org/addupload.php">
                      Add a leaflet
                  </a>
              </li>
              <li>
                  <a href="http://www.electionleaflets.org/leaflets/">
                      Latest
                  </a>
              </li>
              <li>
                  <a href="http://www.electionleaflets.org/random/">
                      Random
                  </a>
              </li>
              <li>
                  <a href="http://www.electionleaflets.org/analyze.php">
                      Analyse
                  </a>
              </li>
            </ul>
        </div>
 
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div id="sidebar" >
<H1>Leaflets delivered by constituency</H1>
<table>
<tr>
{% for keyvalue in keyvalues %}
<td><img src="{% url boundaries.views.view_key mapname keyvalue 10 10 %}"/></td>
{% endfor %}
</tr>
<tr>
{% for keyvalue in keyvalues %}
<td>{{keyvalue}}</td>
{% endfor %}
</tr>
</table>
<div id="content"><H1>Click on a constituency to see leaflets.</H1></div>
 </div>
<div id="map"></div>
</body>
</html>
